<template>
  <div>
    <van-nav-bar
        title="今天吃什么？"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-notice-bar scrollable text="不知道吃什么？！那就来这里吧！不过一不小心就没饭吃了哟" />
<!--    <div>-->
    <div class="bgi">
      <nut-luckdraw
          class="drawTable"
          ref="luckDrawPrize"
          :luck-width="luckWidth"
          :luck-height="luckheight"
          :prize-list="prizeList"
          :turns-number="turnsNumber"
          :turns-time="turnsTime"
          :prize-index="prizeIndex"
          :style-opt="styleOpt"
          @end-turns="endTurns"
      >
        <template slot="item" slot-scope="scope">
          <div class="drawTable-name">{{ scope.item.prizeName }}</div>
          <div class="drawTable-img">
            <img :src="scope.item.prizeImg">
          </div>
        </template>
      </nut-luckdraw>
      <div @click="startTurns" class="pointer" :style="pointerStyle"></div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 转盘大小
      luckWidth: '280px',
      luckheight: '280px',
      // 转盘指针图片样式
      pointerStyle: {
        width: '80px',
        height: '80px',
        backgroundImage: 'url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
      },
      // 奖品列表
      prizeList: [
        {
          id: 'xiaomi',
          // prizeName: '小米手机',
          // prizeImg: 'ghttps://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.pn'
          prizeName: '面条',
          prizeImg: 'https://img1.baidu.com/it/u=680510718,918294999&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'

        },
        {
          id: 'blue',
          prizeColor: 'rgb(251, 219, 216)',
          prizeName: '米饭',
          prizeImg: 'https://img1.baidu.com/it/u=111810880,3061403719&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200'
        },
        {
          id: 'apple',
          prizeName: '减脂',
          prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Flarge%2F9150e4e5gw1fa946pk2khj20k00k0abc.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668254686&t=262521b3eaa08eb6ebcadde365cdb6a0'
        },
        {
          id: 'fruit',
          prizeColor: 'rgba(246, 142, 46, 0.5)',
          prizeName: '鸡腿',
          prizeImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F48%2F96%2F5baf0ea7d65a5_610.jpg&refer=http%3A%2F%2Fbpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668255160&t=638e3993a8707d049e308165dc8fee18'
        },
        {
          id: 'fish',
          prizeName: '饺子',
          prizeImg: 'https://img0.baidu.com/it/u=3458262758,450174932&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501'
        },
        {
          id: 'thanks',
          prizeName: '炒饭',
          prizeImg: 'https://img2.baidu.com/it/u=1735654554,906530659&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
        }
      ],
      turnsNumber: 10, // 转动圈数
      turnsTime: 5,// 转动时间：S
      styleOpt: {
        prizeBgColors: ['rgb(255, 231, 149)','rgb(255, 247, 223)','rgb(255, 231, 149)','rgb(255, 247, 223)','rgb(255, 231, 149)','rgb(255, 247, 223)'],
        borderColor: '#ff9800',
      },
      prizeIndex: -1, // 中奖奖品的index
      lock: false,// 防止多次连续点击抽奖
      num: 20,// 抽奖次数,根据需求定义
    }
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    },
    startTurns() {
      if (!this.canBeRotated()) {
        return false;
      }
      this.lock = true;
      // 此为模拟随机数字，这里可以接受后台中奖信息
      const index = Math.floor(Math.random() * this.prizeList.length);
      // 成功后抽奖次数减1
      this.num--;
      // 中奖奖品的index
      this.prizeIndex = index;
      // 调用组件的方法，使转盘转动并停留在中奖奖品的那个扇形区域
      this.$refs.luckDrawPrize.rotate(index);
    },
    endTurns() {
      this.$dialog({
        content: `看看吃什么？${this.prizeList[this.prizeIndex].prizeName}！`,
        noCloseBtn: false,
        noOkBtn: true,
        cancelBtnTxt: "我知道了"
      });
      this.lock = false;
    },
    canBeRotated() {
      if (this.num <= 0) {
        this.$dialog({
          content: `已经没有次数了,继续加油赚积分吧！`,
          noCloseBtn: false,
          noOkBtn: true,
          cancelBtnTxt: "我知道了"
        });
        return false;
      }
      if (this.lock) {
        return false;
      }
      return true;
    },
  }
}
</script>

<style scoped>
.nut-luckdraw .drawTable-img img{
  border-radius: 50%;
}
.bgi{
  background-image: url(../../assets/bc1.webp);
  height: calc(100vh - 87px);
  background-size: cover;
}
/deep/.nut-luckdraw .drawTable-name{
  font-size: 18px;
}
</style>